<template>
  <div class="protask">
    <div class="task_search">
      <el-input v-model="searchForm.taskId" style="width:150px"></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="small"
        style="margin-bottom:2%"
        @click="search"
      >搜索</el-button>
      <el-button icon="el-icon-delete" size="small" style="margin-left:10px" @click="clearform">清空</el-button>
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        style="margin-bottom:2%"
        @click="addTaskClick"
      >添加成员</el-button>
    </div>
    <!-- 任务列表 -->
    <el-table
      v-loading="tableLoading"
      :border="true"
      :data="tableData"
      :header-cell-style="{background:'rgb(250, 250, 250)',color: 'rgba(0,0,0,.85)'}"
      stripe
      style="width: 100%;margin-bottom:20px;"
    >
      <el-table-column
        fixed
        type="index"
        label="序号"
        width="50"
        show-overflow-tooltip
        align="center"
        background="#000"
      >
        <template slot-scope="scope">
          <span>{{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="realName" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="角色" prop="roleName" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="昵称" prop="nickname" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="性别" prop="sex" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span>{{scope.row.sex|sex}}</span>
        </template>
      </el-table-column>
      <el-table-column label="生日" prop="birthday" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="电话" prop="phone" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column label="会员状态" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span>{{scope.row.status|status}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="250"
        :border="true"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            icon="el-icon-view"
            size="small"
            type="text"
            @click="detailsClick(scope.row)"
          >详情</el-button>
          <el-button icon="el-icon-edit" size="small" type="text" @click="editClick(scope.row)">编辑</el-button>
          <el-button type="text" icon="el-icon-delete" size="small" @click="delClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页底部 -->
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      @size-change="handleSizeChange"
      :page-size="page.pagesize"
      layout="total,jumper,prev, pager, next,sizes"
      :total="page.total"
    ></el-pagination>

    <!-- 新增 -->
    <a-modal v-model="dialogAddVisible" title="添加成员" destroy-on-close>
      <el-form ref="addForm" :model="addForm" :rules="addRules">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24">
            <el-form-item label="指定成员" :label-width="formLabelWidth" prop="memberId">
              <el-select
                v-model="addForm.memberId"
                placeholder="请选择成员姓名"
                style="width: 100%"
                @change="handleChange"
              >
                <el-option
                  v-for="item in assignToList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="项目角色" :label-width="formLabelWidth" prop="roleId">
              <el-select v-model="addForm.roleId" placeholder="请选择项目角色" style="width: 100%">
                <el-option
                  v-for="item in roleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSave('addForm')">提 交</el-button>
      </div>
    </a-modal>

    <!-- 0 新增/1 详情 / 2编辑 -->
    <a-modal v-model="dialogVisible" :title="dialogName==1?'详情':'编辑'" destroy-on-close>
      <el-form ref="form" :model="form" :rules="rules">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.realName" :disabled="dialogName==1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="项目角色" :label-width="formLabelWidth">
              <el-select v-model="form.roleId" placeholder="请选择项目角色" style="width: 100%">
                <el-option
                  v-for="item in roleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="昵称" :label-width="formLabelWidth">
              <el-input v-model="form.nickname" :disabled="dialogName==1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-select
                v-model="form.sex"
                placeholder="请选择性别"
                :disabled="dialogName==1"
                style="width:100%"
              >
                <el-option label="男" :value="'0'"></el-option>
                <el-option label="女" :value="'1'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="生日" :label-width="formLabelWidth">
              <el-date-picker
                type="datetime"
                v-model="form.birthday"
                placeholder="选择出生日期"
                align="right"
                style="width:100%"
                :disabled="dialogName==1"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
              <el-input v-model="form.phone" :disabled="dialogName==1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="会员状态" :label-width="formLabelWidth">
              <el-select
                v-model="form.status"
                placeholder="请选择会员状态"
                :disabled="dialogName==1"
                style="width:100%"
              >
                <el-option label="正常" :value="'0'"></el-option>
                <el-option label="冻结" :value="'1'"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleupDate('form')" v-if="dialogName==2">修 改</el-button>
        <el-button @click="dialogVisible=false">取 消</el-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  getObj,
  delObj,
  putObj,
  addObj,
  getMember,
  getRole
} from "@/api/project/promember.js";
import { isMobile } from "@/util/validate.js";

var checkPhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("手机号不能为空"));
  } else {
    console.log(isMobile);
    if (isMobile(value)) {
      callback();
    } else {
      return callback(new Error("请输入正确的手机号"));
    }
  }
};
export default {
  data() {
    return {
      tableLoading: false,
      dialogAddVisible: false,
      dialogVisible: false,
      dialogName: 0,
      formLabelWidth: "100px",
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      form: {},
      searchForm: {},
      tableData: [],
      rules: {
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }]
      },
      assignToList: [],
      addForm: {},
      addRules: {
        memberId: [{ required: true, message: "请选择成员", trigger: "change" }]
      },
      roleList: []
    };
  },
  created() {
    this.getList(this.page);
    this.getMemberObj();
    this.getRoleObj();
  },
  watch: {
    $route() {
      this.getList(this.page);
    }
  },
  methods: {
    getList(page) {
      this.tableLoading = true;
      getObj(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          { projectId: this.$route.query.projectId },
          this.searchForm
        )
      )
        .then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    getMemberObj() {
      getMember({ projectId: this.$route.query.projectId }).then(res => {
        this.assignToList = res.data.data.records.map(item => {
          return {
            value: item.memberId,
            label: item.realName + "-" + item.phone,
            orgId: item.orgId
          };
        });
      });
    },
    getRoleObj() {
      getRole({ projectId: this.$route.query.projectId }).then(res => {
        this.roleList = res.data.data.map(item => {
          return {
            value: item.roleId,
            label: item.roleName
          };
        });
        console.log(this.roleList);
      });
    },
    handleCurrentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getList(this.page);
    },
    handleSizeChange(sizePage) {
      this.page.pageSize = sizePage;
      this.getList(this.page);
    },
    search() {},
    // 新增
    addTaskClick() {
      this.addForm = {};
      this.dialogAddVisible = true;
    },
    // 详情
    detailsClick(row) {
      this.form = {};
      this.dialogVisible = true;
      this.dialogName = 1;
      this.form = row;
    },
    // 编辑
    editClick(row) {
      this.form = {};
      this.dialogVisible = true;
      this.dialogName = 2;
      this.form = row;
      console.log(this.form);
    },
    // 删除
    delClick(row) {
      this.$confirm(
        "此操作将项目成员名为“ " + row.realName + " ”数据删除, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          delObj(row.memberId).then(res => {
            this.getList(this.page);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 清空
    clearform() {},
    // 新增保存
    handleSave(addForm) {
      this.addForm.projectId = this.$route.query.projectId;
      this.$refs[addForm].validate(valid => {
        if (valid) {
          addObj(this.addForm)
            .then(res => {
              this.page.currentPage = 1;
              this.getList(this.page);
              this.dialogAddVisible = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "新增失败"
              });
            });
        } else {
          return false;
        }
      });
    },
    // 修改提交
    handleupDate(form) {
      this.form.projectId = this.$route.query.projectId;
      this.$refs[form].validate(valid => {
        if (valid) {
          putObj(this.form)
            .then(res => {
              this.getList(this.page);
              this.dialogVisible = false;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "修改失败"
              });
            });
        } else {
          return false;
        }
      });
    },
    handleChange(val) {
      this.assignToList.forEach(item => {
        if (val == item.value) {
          this.addForm.orgId = item.orgId;
        }
      });
    }
  },
  filters: {
    status: data => {
      switch (data) {
        case "0":
          return "正常";
        case "1":
          return "冻结";
        default:
      }
    },
    sex: data => {
      switch (data) {
        case "0":
          return "男";
        case "1":
          return "女";
        default:
      }
    }
  }
};
</script>
<style scoped lang="less">
.protask {
}
</style>
